<template>
  <div class="center-bottom" v-if="pageflag">
    <div class="chart" style="height: 10%">
      <table class="table1" style="height: 100%">
        <tr class="headtr">
          <th
            style="
              width: 25%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            单位名
          </th>
          <th
            style="
              width: 12%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            网关数
          </th>
          <th
            style="
              width: 12%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            设备数
          </th>
          <th
            style="
              width: 11%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            数据点
          </th>
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            报警
          </th>
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 18px;
            "
          >
            操作
          </th>
        </tr>
      </table>
    </div>
    <div class="chart" style="height: 88%">
      <table class="table1">
        <vue-seamless-scroll :data="tableData" class="seamless-warp">
          <ul class="item">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              style="
                display: flex;
                justify-content: space-around;
                align-items: center;
              "
            >
              <span
                style="
                  width: 22%;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                "
                >{{ item.name }}</span
              >
              <span
                style="
                  width: 12%;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                "
                >{{ item.gatewayCount }}</span
              >
              <span style="width: 12%; text-align: center">{{
                item.deviceCount
              }}</span>
              <span style="width: 11%; text-align: center">{{
                item.paramCount
              }}</span>
              <span style="width: 20%; text-align: center">{{
                item.hasWarning
              }}</span>
              <span style="width: 18%; text-align: center">
                <el-button type="text" @click="clickRecord(item)"
                  >报警记录</el-button
                >&nbsp;&nbsp;|&nbsp;&nbsp;
                <el-button
                  type="text"
                  style="margin: 0px"
                  @click="clickHistorical(item)"
                  >历史记录</el-button
                >
              </span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </table>
      <span
        v-if="!tableData.length"
        style="
          font-size: 12px;
          text-align: center;
          width: 100%;
          display: block;
          margin-top: 20px;
          color: #ffffff;
        "
        >暂无数据</span
      >
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 100px">
    重新获取
  </Reacquire>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "center-bottom",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      pageflag: false,
      tableData: [],
    };
  },
  mounted() {
    this.getData(); // 在线离线概览
  },
  methods: {
    // 表头样式
    tableHeaderCellStyle() {
      return {
        "background-color": "#083071 !important",
        color: "#71CDF9",
        "font-size": "14px",
        "border-bottom": "none",
        "text-align": "center",
      };
    },
    // 行样式
    rowStyle({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return {
          background: "#081843 !important",
        };
      } else {
        return {
          background: "#0e2b55 !important",
        };
      }
    },
    // 列样式
    // eslint-disable-next-line no-unused-vars
    tableCellStyle({ column, columnIndex, row, rowIndex }) {
      if (column.label === "报警") {
        if (row.alarm) {
          return {
            color: "red",
            "font-size": "14px",
            "border-bottom": "none",
            "text-align": "center",
            padding: "8px 0px",
          };
        } else {
          return {
            color: "#ddd",
            "font-size": "14px",
            "border-bottom": "none",
            "text-align": "center",
            padding: "8px 0px",
          };
        }
      } else {
        return {
          color: "#ddd",
          "font-size": "14px",
          "border-bottom": "none",
          "text-align": "center",
          padding: "8px 0px",
        };
      }
    },
    getData() {
      let res = [
        {
          id: "073a2ece8b2b402cb2b9dcd719843552",
          name: "新宇航空制造（苏州）有限公司",
          coordinate: "120.74119183391946,31.34926338702725",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: 2,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "162fca3718ef4f819f2bc1da2a496682",
          name: "苏州黑猫（集团）有限公司",
          coordinate: "120.85648763934466,31.331926902871167",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 4,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "291f733652074862966123906e56e264",
          name: "曙光制动器（苏州）有限公司",
          coordinate: "120.79820099649928,31.347941885734542",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 2,
          hasWarning: 0,
        },
        {
          id: "2e17e7074380418e87ca2b031ec695df",
          name: "苏州外延世电子材料有限公司",
          coordinate: "120.77787000721408,31.35380332673656",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: 2,
          paramCount: 8,
          hasWarning: 0,
        },
        {
          id: "38e088710cbd4b74b3afc5533a948b43",
          name: "江苏安胜达安全科技有限公司",
          coordinate: "120.7173127175311,31.367293588305834",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: null,
          gatewayCount: null,
          paramCount: null,
          hasWarning: 0,
        },
        {
          id: "3c9018a47d8a4ae0841c78f1bc7810d1",
          name: "贺氏（苏州）特殊材料有限公司",
          coordinate: "120.80630577830188,31.3055615071069",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 4,
          gatewayCount: 1,
          paramCount: 16,
          hasWarning: 0,
        },
        {
          id: "4057a625101e448595d3f2df7792b33e",
          name: "苏州安泰空气技术有限公司",
          coordinate: "120.73955566026359,31.36034883213269",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "4e2c551765364884909ba506a2192347",
          name: "贲安能源科技江苏有限公司",
          coordinate: "121.12465348323587,31.50433618335127",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: 1,
          paramCount: 10,
          hasWarning: 0,
        },
        {
          id: "6294d10c867e4d76834a58e9c460b2f1",
          name: "太仓红马机械设备制造有限公司",
          coordinate: "121.11082532753755,31.5746451969521",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 17,
          gatewayCount: 2,
          paramCount: 34,
          hasWarning: 0,
        },
        {
          id: "6761f7fbbae3459f97d28e46719f9848",
          name: "柿沼制冷（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: 1,
          paramCount: 4,
          hasWarning: 0,
        },
        {
          id: "70a22a2832d04b4d91ff1b5922cdf552",
          name: "太仓市凯德防腐科技有限公司",
          coordinate: "121.09522086252373,31.695569715253114",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 0,
        },
        {
          id: "77e95f7bf0a84bbbac20511f59a9b319",
          name: "麦特达因(苏州)汽车部件有限公司",
          coordinate: "120.81757259549974,31.314438229551936",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 0,
        },
        {
          id: "7d0fa6bd6c3b434e82a9959d6c943218",
          name: "裕克施乐塑料制品（太仓）有限公司",
          coordinate: "116.4133836971231,39.910924547299565",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 8,
          gatewayCount: 1,
          paramCount: 16,
          hasWarning: 0,
        },
        {
          id: "7ebd1040f3cd42de96b5fe6ddbf2d679",
          name: "雅士利涂料（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 3,
          gatewayCount: 3,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "80031d57b5ad4f6cab59a406b3bdddc0",
          name: "卫美恒（苏州）医疗器械有限公司",
          coordinate: "120.86334287818303,31.318186037968466",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "9dedaf6435164db8ac202f8a12aeb4c7",
          name: "麦克维尔空调制冷(苏州)有限公司",
          coordinate: "120.79773576407557,31.3196853376012",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 0,
        },
        {
          id: "a3b18c3aca1845ad93ed18742cc84d0f",
          name: "康美包(苏州)有限公司",
          coordinate: "120.79066349462607,31.32754143935975",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 4,
          gatewayCount: 4,
          paramCount: 16,
          hasWarning: 0,
        },
        {
          id: "a7ab0156a23149bf91d188252c4c90f8",
          name: "华菱科技（苏州）有限公司",
          coordinate: "120.81372865639193,31.324931346734576",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "acaa5b08488b48bc9cfc9351e6130e6f",
          name: "太仓力达莱特精密工业有限公司",
          coordinate: "121.05015952254891,31.50965375326678",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: 1,
          paramCount: 4,
          hasWarning: 0,
        },
        {
          id: "b613d3bacdc44a1b94d4b545f211614b",
          name: "乔治费歇尔金属成型科技（苏州）有限公司",
          coordinate: "120.79525455442646,31.31907136628446",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "bedc645807be4eee9f4eff2aa7a60dae",
          name: "哈金森工业橡胶制品（苏州）有限公司",
          coordinate: "120.8154502589018,31.376196953467606",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "c20dd13a1dfc4ee484440e3966af6a93",
          name: "苏州联屹精密机械有限公司",
          coordinate: "120.74762235391263,31.348430420024464",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "c27ac77b32fa4072ab09197079c9bacc",
          name: "大同电工（苏州）有限公司",
          coordinate: "120.80043625009968,31.337734105063348",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 3,
          hasWarning: 0,
        },
        {
          id: "c85908a5910a42fcb617ed5465806e2e",
          name: "无锡沃德汽车零部件有限公司",
          coordinate: "120.56010027022987,31.545099462884213",
          districtCode: "320205",
          districtName: "锡山区",
          deviceCount: 6,
          gatewayCount: 1,
          paramCount: 12,
          hasWarning: 0,
        },
        {
          id: "d930cbef422e479fa7417d5baae24c40",
          name: "海德鲁铝业（苏州）有限公司",
          coordinate: "120.78988574171562,31.3057486023035",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 8,
          gatewayCount: 1,
          paramCount: 40,
          hasWarning: 1,
        },
        {
          id: "e6c01c837633421ba9111351e3bf7c2a",
          name: "敬鹏(常熟)电子有限公司",
          coordinate: "120.81101218052983,31.598708349116254",
          districtCode: "320581",
          districtName: "常熟市",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 6,
          hasWarning: 0,
        },
        {
          id: "f37688f12bad430d88da334132e9fe91",
          name: "苏州爱知科技有限公司",
          coordinate: "120.8206836071419,31.328173519442352",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 1,
          gatewayCount: 1,
          paramCount: 5,
          hasWarning: 1,
        },
      ];
      this.pageflag = true;

      this.tableData = res.filter(
        (item) => item.name !== "江苏安胜达安全科技有限公司"
      );
    },
    // 报警记录
    clickRecord(row) {
      console.log("报警记录", row);
      // this.$router.push({
      //   name: "alarmIndex",
      //   params: { id: row.id },
      // });
    },
    // 历史记录
    clickHistorical(row) {
      console.log("历史记录", row);
      // this.$router.push({
      //   name: "historyList",
      //   params: { id: row.id },
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.center-bottom {
  height: 98%;
  flex: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0px 10px;
  .chart::-webkit-scrollbar {
    display: none;
  }
  .chart {
    width: 100%;
    overflow-y: scroll;
    .table1 {
      width: 100%;
      font-size: 14px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0px 0px;
      .seamless-warp {
        height: 100%;
        overflow: hidden;
        .item {
          padding: 0px 10px;
        }
      }
      .headtr {
        border-bottom: 1px solid rgba(0, 143, 253, 0.4);
        border-top: 1px solid rgba(0, 143, 253, 0.4);
        line-height: 14px;
        background-color: rgba(7, 73, 155, 0.4);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #71cdf9;
      }
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 36px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
      li:nth-child(2n) {
        height: 36px;
        background-color: rgba(113, 205, 249, 0.1);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      th {
        height: 17px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(23, 203, 203, 1);
        line-height: 17px;
      }
      td {
        text-align: center;
        color: white;
      }
      .rank1 {
        color: #66c852;
      }
      .rank1 {
        color: #66c852;
      }
      .rank2 {
        color: #fdb628;
      }
      .rank3 {
        color: #ed504c;
      }
    }
  }
}
</style>
